<template>
	<view class="">
		<view class="wrap">
			<view class="top"></view>
			<view class="content">
				<view class="title">
					快捷注册
					<text class="gui-text-small">{{scene}}</text>
					<text v-if="shareID" class="gui-text-small gui-color-green 
				gui-bg-green7 gui-padding-small gui-border-box  gui-border-radius-small">来自朋友的分享</text>
				</view>
				<view class="logo">
					<image src="/static/assets/images/logo/logo64.jpg" style="width:120px;border-radius: 64rpx;"
						mode="widthFix"></image>
				</view>
			</view>

			<!-- 注册协议 -->
			<u-popup :show="showDeclare" mode="center" :round="2">
				<view class="gui-padding" style="height:1200rpx;overflow-y: scroll;">
					<view class="gui-h2 gui-text-center">
						<text>7彩达惠小程序用户注册协议</text>
					</view>
					<view class="gui-margin-top">

					</view>
					<view class="gui-h3">
						<view class="gui-text">
							在使用本系统的所有功能之前，请您务必仔细阅读并透彻理解本声明。您可以选择不使用本系统，但如果您使用本系统，您的使用行为将被视为对本声明全部内容的认可。
						</view>
					</view>
					<view class="gui-h3">
						<view class="gui-h4">
							一、系统特色
						</view>
						<view class="gui-text">
							彩达惠整合本地众多实体生活商家致力于覆盖生活全品类惠及所有注册会员。让会员享受本地各个方面的优惠生活。
							会员注册及注销：用户通过小程序注册成为会员，即可享受所以注册商家的会员优惠政策。会员注销可直接通过小程序注销。注销成功后会员费自动返还该用户。注销后将不在享受会员的所有优惠及权益。
						</view>
						<view class="gui-h4">
							二、关于隐私权
						</view>
						<view class="gui-text">
							访问者在本系统注册时提供的一些个人资料，本系统除您本人同意外不会将用户的任何资料以任何方式泄露给第三方。
							当政府部门、司法机关等依照法定程序要求本系统披露个人资料时，本系统将根据执法单位之要求或为公共安全之目的提供个人资料，在此情况下的披露，本系统不承担任何责任。
						</view>
						<view class="gui-h4">
							三、关于版权
						</view>
						<view class="gui-text">
							1、凡本系统注明七彩达惠的所有作品，其版权属于七彩虹软装工作室和本系统所有。其他媒体、网站或个人转载使用时不得进行商业性的原版原式的转载，也不得歪曲和篡改本系统所发布的内容。<br />
							2、被本系统授权使用的单位，不应超越授权范围。<br />
							3、本系统提供的资料如与相关纸质文本不符，以纸质文本为准。<br />
							4、如因作品内容、版权和其它问题需要同本系统联系的，请在本系统发布该作品后的三日内进行。<br />
						</view>
						<view class="gui-h4">
							四、关于解释权
						</view>
						<view class="gui-text">
							本系统之声明以及其修改权、更新权及最终解释权均属本站以及七彩虹软装工作室所有。
						</view>
						<view class="gui-h4">
							五、会员权利与义务
						</view>

						<view class="gui-text">
							会员承诺遵守法律法规、社会主义制度、国家利益、公民合法权益、公共秩序、社会道德风尚和信息真实性等七条底线；
							会员在其名称、头像和简介等注册信息中不得出现违法和不良信息；七彩达惠将配备与服务规模相适应的专业人员，对会员提交的账号名称、头像和简介等注册信息进行审核，
							对含有违法和不良信息的，不予注册，对会员发布的违法信息，有权进行删除处理，多次出现违法行为的账号，七彩虹软装工作室有权删除账号，并不退还相关款项。
							七彩达惠保护用户信息及公民个人隐私，自觉接受社会监督，及时处理公众举报的账号名称、头像和简介等注册信息中的违法和不良信息。
							会员的所有行为必须符合国家法律的规定，如违反国家法律规定和本协议，出现任何纠纷及不良结果，将由行为人独立承担所有责任。
							本小程序上的信息本网站上关于七彩达惠会员或他们的产品（包括但不限于公司名称、联系人及联络信息，产品的描述和说明，相关图片、视讯等）的信息均由会员单位自行提供，
							会员依法应对其提供的任何信息承担全部责任。七彩虹软装工作室对此等信息的准确性、完整性、合法性或真实性均不承担任何责任。此外，七彩虹软装工作室对任何使用或提供本网站信息的商业活动及其风险不承担任何责任。
							未经合法权利人的书面许可，任何人严禁在本小程序展示产品图片。任何未经授权便在小程序上使用该图片都可能违反国际法，商标法，隐私权法，通讯、通信等法律法规。浏览者可以截图七彩达惠显示的资料。
						</view>
						<view class="gui-h4">
							六、免责申明
						</view>
						<view class="">
							<text class="gui-text">
								七彩达惠的各项电子服务的所有权和运作权归七彩虹软装工作室。
								提供的服务将完全按照其发布的章程、服务条款和操作规则严格执行。会员若完全同意所有服务条款，并完成注册程序，即可成为七彩达惠的正式会员。
								基于七彩达惠提供的网络服务的商业性和时效性：　会员对其发布的信息负责，应提供详尽、真实、准确的企业资料，
								不得发布不真实的、有歧义的信息，绝对禁止发布误导性的、恶意的消息。　随时更新注册资料，以符合及时、详尽、准确的要求。
								如果会员将帐号或密码丢失或被盗，应及时重新登记并重新设置密码。会员造成的帐号失密，应自行承担责任　
								会员发现七彩达惠发布的信息不准确或发生错误，以及其它错误行为，应及时通知本网。
								若问题未能及时解决，可进入本网的投诉程序。
								七彩达惠向会员提供的商品信息之编辑、编制、传播的版权和知识产权，全部由七彩虹软装工作室拥有；
								未经七彩虹软装工作室事先以书面表示同意，任何人不得以各种形式复制、散布、出售、出版、广播、转播该商品信息。
								七彩虹软装工作室如发现会员提供的资料包含有不正确或者违法的信息，将发出警告，并保留停止或终止其会员资格的权利。　
								会员如违反本协议而造成七彩虹软装工作室的经济损失，本网有权追究其经济责任与法律责任。
							</text>
						</view>

					</view>
				</view>
				<view class="gui-text gui-padding-x">
					<view class="gui-text">
						<view class="">
							<button type="default" @tap="registerAgree" :plain="true"
								class="gui-button gui-bg-primary gui-noborder">
								<text class="gui-color-white gui-button-text">同意</text>
							</button>
						</view>

						<view class="gui-margin-top">
							<button type="default" :plain="true" @tap="shutdown"
								class="gui-button gui-margin-top gui-bg-orange gui-noborder">
								<text class="gui-color-white gui-button-text">不同意</text>
							</button>
						</view>

					</view>
				</view>
			</u-popup>

			<view class="buttom">
				<view class="loginType">
					<view class="gui-flex gui-columns">
						<text class="gui-color-gray gui-text-center">微信手机号一键注册</text>
						<view class="gui-margin-top">

						</view>

						<button class="gui-button gui-bg-blue gui-noborder" open-type="getUserInfo"
							@getuserinfo="callDouyin">
							<text class="gui-color-white gui-button-text gui-icons">&#xe629;注册</text>
						</button>
						<view class="gui-margin-top">

						</view>
						<text class="gui-color-gray gui-text-center">返回登录</text>
						<view class="gui-margin-top">

						</view>
						<button class="gui-button gui-bg-orange gui-noborder" @tap="toLogin">
							<text class="gui-icons gui-block gui-color-white gui-text">&#xe643;</text>
						</button>
					</view>
				</view>

				<view class="hint">
					<!-- @hulu -->
					<view>
						<u-checkbox-group size="12" placement="column" @change="changeAgree" v-model="checkedArr">
							<label>
								<u-checkbox label="同意" size="14" name="tongyi" value="true"
									style="transform:scale(0.7)" />
							</label>
						</u-checkbox-group>
					</view>

					注册代表同意
					<text class="link" @tap="showPrivacy=true">用户协议、隐私政策，</text>
					并授权使用您的账号信息（如昵称、头像、地理位置信息，手机号）以便您统一管理
				</view>
			</view>

			<!-- 注册弹窗层 -->
			<gui-popup ref="guipopup1" style="width:1000rpx;">
				<view class="gui-padding-small gui-bg-white gui-border-radius-small">
					<view class="gui-padding">
						<view style="text-align: center;padding:20rpx 0;font-size: 44rpx;">
							请授权微信个人信息
						</view>
						<view class="gui-text">
							<view>为提供更完善的服务,请授权或完善个人信息，绑定手机号</view>
						</view>
						<form @submit="submit">
							<text class="gui-text-small gui-color-gray">昵称授权</text>
							<input id="nickname-input" type="nickname"
								class="gui-text gui-border-b gui-primary-border-color" @focus="inputNickname"
								name="nickName" v-model="userInfo.nickName" border="none" placeholder="请授权昵称" />
							<text class="gui-text-small gui-color-gray">头像授权</text>
							<view v-if="!hasAuthAvatar">
								<button class="gui-button gui-button-mini gui-bg-orange gui-noborder"
									open-type="chooseAvatar" style="width:66rpx;" @chooseavatar="chooseavatar">
									<text
										class="gui-block gui-color-white gui-button-text-mini gui-icons">&#xe626;</text>
								</button>
							</view>
							<view v-else>
								<input hidden v-model="userInfo.avatarUrl" name="avatarUrl" />
								<image :src="userInfo.avatarUrl" style="width:80rpx;" mode="widthFix"
									class="authorization">
								</image>
							</view>

							<text class="gui-text-small gui-color-gray">手机号授权</text>
							<view v-if="!hasAuthMobile">
								<button class="gui-button gui-button-mini gui-bg-red gui-noborder" type="default"
									open-type="getPhoneNumber" style="width:66rpx;"
									@getphonenumber="getminiprogramcode">
									<text
										class="gui-block gui-color-white gui-button-text-mini gui-icons">&#xe60e;</text>
								</button>
							</view>
							<view v-else>
								<input type="mobile" v-model="userInfo.mobile"
									class="gui-text gui-border-b gui-primary-border-color" name="mobile" border="none"
									placeholder="请授权手机号" />
							</view>
							<view class="gui-margin-top-large" style="height:80rpx;">
								<text class="gui-color-red gui-text">{{error}}</text>
							</view>
							<view class="gui-margin-top-large">
								<button class="gui-button gui-bg-primary gui-noborder" type="default" formType="submit">
									<text class="gui-button-text-small gui-color-white">
										提交
									</text>
								</button>
							</view>
						</form>
					</view>
				</view>

			</gui-popup>
		</view>
		<!-- 隐私协议弹窗 -->

		<view class="gui-padding">
			<!-- 利用模态对话框弹出协议  -->
			<gui-modal ref="guimodal" width="660rpx" :isCloseBtn="false" title="用户协议及隐私政策">
				<template v-slot:content>
					<scroll-view scroll-y :style="{height:contentHeight+'px'}" class="gui-bg-gray gui-dark-bg-level-2">
						<text class="gui-block gui-text" style="line-height:50rpx; padding:25rpx;">访问者在本系统注册时提供的一些个人资料，
							本系统除您本人同意外不会将用户的任何资料以任何方式泄露给第三方。
							当政府部门、司法机关等依照法定程序要求本系统披露个人资料时，本系统将根据执法单位之要求或为公共安全之目的提供个人资料，
							在此情况下的披露，本系统不承担任何责任<br />
							七彩达惠小程序将保护用户信息及公民个人隐私，自觉接受社会监督，及时处理公众举报的账号名称、头像和简介等注册信息中的违法和不良信息。
						</text>
					</scroll-view>
				</template>
				<template v-slot:btns>
					<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
					<view style="width:100%;">
						<view class="gui-flex gui-rows gui-space-between">
							<text class="modal-btns gui-block-text gui-color-gray" @tap="disagree">不同意</text>
							<text class="modal-btns gui-block-text gui-primary-color" @tap="agree">同意协议</text>
						</view>
					</view>
				</template>
			</gui-modal>
		</view>
		<hulu-PrivacyPop ref="PrivacyPopck"></hulu-PrivacyPop>
	</view>
</template>

<script>
	import request from '@/api/request.js'
	import graceJS from "@/Grace6/js/grace.js";
	import graceChecker from "@/Grace6/js/checker.js";
	import base from '@/api/base'
	export default {
		data() {
			return {
				tel: '',
				showPopup: false,
				hasAuthAvatar: false,
				hasAuthMobile: false,
				tmpAvatarUrl: '',
				error: "",
				shareID: null,
				showDeclare: false,
				contentHeight: 300,
				checkedArr: [],
				declared: false,
				userInfo: {
					pid: this.shareID,
					nickName: "",
					avatarUrl: "",
					miniprogramcode: "",
					mobile: "",
					openid: ""
				},
				PrivacyPopck: null,
				checked: false,
				options: {},
				scene: null,
				showPrivacy: false,
			}
		},
		async onLoad(options) {
			//分为2种情况，
			if (options.scene) {
				// 情况一、通过小程序码到达
				const scene = decodeURIComponent(options.scene)
				const id = scene.split("=")[1]
				this.shareID = id
				this.userInfo.pid = id
			} else {
				// 情况二、通过分享到达
				this.shareID = options.id
				this.userInfo.pid = options.id
			}
		},
		mounted() {
			this.$refs.PrivacyPopck.checkPrivacySetting();
			var agreeRec = graceJS.getStorage('agreeRec');
			// 用户没有同意过弹出协议框
			if (!agreeRec || agreeRec == '') {
				// 计算窗口高度，规划协议内容高度 = 窗口高度 * 0.65
				var systemInfo = graceJS.system();
				this.contentHeight = systemInfo.windowHeight * 0.65;
				// this.$refs.guimodal.open();
			}
		},
		methods: {
			disagree: function() {
				// @hulu
				this.checkedArr = []
				// 不同意对应的逻辑
				uni.showToast({
					title: '您不同意本协议',
					icon: "none"
				});
				this.checked = false
				console.log("this.checked", this.checked)
				this.$refs.guimodal.close();
				// uni.exitMiniProgram({
				// 	success: () => {
				// 		console.log('退出小程序成功');
				// 	}
				// });
			},
			agree: function() {
				// 同意对应的逻辑
				// 如记录用户已经同意过
				graceJS.setStorage({
					'agreeRec': 'agreed'
				});
				uni.showToast({
					title: '您已同意本协议',
					icon: "none"
				});
				this.checked = true
				this.$refs.guimodal.close();
			},
			handleAgreePrivacyAuthorization() {
				console.log("同意隐私协议")
				tt.getUserProfile()
				// wx.getPhonenumber()
			},
			changeAgree(e) {
				console.log("Change/agree,", e)
				if (e.length == 1 && e[0] == 'tongyi') {
					this.$refs.guimodal.open();
				}
			},
			toLogin() {
				uni.navigateTo({
					url: '/subpages/user/login'
				})
			},
			toAgree() {
				uni.navigateTo({
					url: 'user/agreement'
				})
			},
			registerAgree() {
				this.showDeclare = false
				this.declared = true
			},
			shutdown() {
				this.showDeclare = false
				uni.exitMiniProgram({
					success: function() {
						console.log('退出小程序成功');
					},
					fail: function(err) {
						console.log('退出小程序失败', err);
					}
				})
			},
			async getminiprogramcode(e) {
				const code = e.detail.code
				if (code == null) {
					return uni.showToast({
						icon: "none",
						title: "请请授权手机号"
					})
				}
				const phonedata = await request.post("wechat/phonenumber", {
					code: code
				})
				this.userInfo.mobile = phonedata.phoneNumber
				this.hasAuthMobile = true
			},
			async getUserInfo(e) {
				let data = await request.post("mini/mini_wechat/openid", {
					code: this.userInfo.miniprogramcode
				})
				this.userInfo.openid = data.openid
				tt.getUserInfo({
					success: async (res) => {
						//获取到userinfo信息
						Object.assign(res.userInfo, {
							openid: data.openid
						})
						this.tmpAvatarUrl = res.userInfo.avatarUrl
					},
					complete() {}
				});
			},
			inputNickname(e) {
				// 1
				uni.showLoading({
					title: '加载中'
				});
				uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)
					.select("#nickname-input")
					.fields({
						properties: ["value"],
					})
					.exec((res) => {
						if (res[0].value == "") {
							return
						}
						//获取到当前用户的昵称,DOM查询结果为一个数组
						this.userInfo.nickName = res[0].value
					})
				uni.hideLoading();
			},
			async callPay() {
				uni.showLoading({
					url: "支付中..."
				})
				const order = await request.post(`mini/order`, {
					price: 99,
					subject: "会员充值",
					way: "charge"
				});
				//发送支付请求（获取支付订单号）
				const orderInfo = await request.post(`mini/pay/${order.id}`, order);

				//拉起小程序支付
				if (!orderInfo) {
					return uni.showToast({
						icon: 'error',
						content: '支付失败'
					});
				}
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: orderInfo['timeStamp'],
					nonceStr: orderInfo['nonceStr'],
					package: orderInfo['package'],
					signType: orderInfo['signType'],
					paySign: orderInfo['paySign'],
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						uni.hideLoading()
						uni.reLaunch({
							url: '/pages/user/index'
						});
					},
					fail: function(err) {
						uni.hideLoading()
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			async chooseavatar(e) {
				const baseUrl = base.host;
				const {
					data
				} = await request.upload(`${baseUrl}/api/upload`, e.detail.avatarUrl)
				if (data) {
					this.hasAuthAvatar = true
					this.userInfo.avatarUrl = `${baseUrl}/upload/${data}`
					console.log(this.userInfo.avatarUrl)
				}
			},
			async submit(e) {
				var rule = [{
						name: "nickName",
						checkType: "string",
						checkRule: "1,",
						errorMsg: "昵称不为空"
					},
					{
						name: "avatarUrl",
						checkType: "string",
						checkRule: "1,",
						errorMsg: "头像不为空"
					},
					{
						name: "mobile",
						checkType: "string",
						checkRule: "1,",
						errorMsg: "手机号不为空"
					},
				];
				//进行表单验证 e.detail.value 内存放着表单数据

				let formData = e.detail.value
				var checkRes = graceChecker.check(formData, rule);
				this.error = graceChecker.error
				console.log(graceChecker.error)
				if (checkRes) {
					formData['openid'] = this.userInfo.openid
					// 分享id
					formData['pid'] = this.userInfo.pid
					const data = await request.post("mini/mini_wechat/login", formData)
					if (data.code == 5001) {
						//表示当前用户已经注册，但是未支付会员费。调用支付其会员费
						console.error("从新下单付款")
						//临时token
						const token = data.token
						uni.setStorageSync("token", token)
						setTimeout(async () => {
							await this.callRemainingWechat();
						}, 100)
						return
					}
					const token = data.data.token
					// 本地缓存token
					uni.setStorageSync("token", token)
					// 跳转到我的页面
					this.callPay();

				}
			},
			//支付未支付的会员费用
			async callRemainingWechat() {
				uni.showLoading({
					icon: "none",
					title: "支付中..."
				})
				//获取待支付的订单
				const order = await request.get(`mini/order/remaining`);
				//发送支付请求（获取支付订单号）
				const orderInfo = await request.post(`mini/pay/${order.id}`, order);
				//拉起小程序支付
				if (!orderInfo) {
					uni.hideLoading()
					return uni.showToast({
						icon: 'error',
						content: '支付失败'
					});
				}
			},
			callDouyin() {
				tt.login({
					force: true,
					success: async (res) => {
						console.log(`login 调用成功${res.code} ${res.anonymousCode}`);
						//发送网络请求获取授权openid
						await request.post("code2Session", {
							code: res.code,
							anonymous_openid: res.anonymousCode
						})

						//授权头像，昵称

					},
					fail(res) {
						console.log(`login 调用失败`);
					},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			.logo {
				display: flex;
				justify-content: center;
				text-align: center;
			}

		}

		.buttom {
			.loginType {
				display: flex;
				padding: 150rpx 150rpx 150rpx 150rpx;
				justify-content: center;
				align-items: center;
			}

			.link {
				color: #f9ae3d;
			}
		}

		.pop {
			width: 600rpx;
			padding: 16px;

			.auth_btn {
				box-shadow: none;
				background-color: #f1a532;
				color: white;
			}

			.auth_btn::after {
				border: none;
			}
		}

		.modal-btns {
			line-height: 100rpx;
			height: 100rpx;
			font-size: 35rpx;
			text-align: center;
			width: 320rpx;
		}
	}
</style>